<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>zui-template</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/css/zui.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/lib/tabs/zui.tabs.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/lib/uploader/zui.uploader.min.css">
</head>

<body>
  <header id="header">
    <div class="brand-container">
      <a class="navbar-brand" href="index.html">
        <strong class="title">Z-Master</strong>
      </a>
    </div>
    <div class="navbar-container">
      <div href="#mainMenu" id="mainMenuToggle" class="has-avatar menu-open">
        <i class="icon icon-bars"></i>
        <i class="icon icon-times"></i>
      </div>
    </div>
  </header>
  <ul class="nav navbar-nav navbar-right" role="navigation">
    <li>
      <div id="search">
        <input type="text" class="form-control input" id="searchInput" placeholder="搜索">
        <div class="icon-search-container">
          <i class="icon icon-search"></i>
        </div>
      </div>
    </li>
    <li class="has-avatar has-badge dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <div class="avatar">
          <i class="icon icon-bell-alt"></i>
          <span class="label label-danger label-dot notice"></span>
        </div>
      </a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">最新动态<span class="label label-badge label-danger pull-right">+9</span></a></li>
        <li><a href="#">邮件通知<span class="label label-badge label-danger pull-right">+12</span></a></li>
      </ul>
    </li>
    <li class="has-avatar dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <div class="avatar">
          <img 
            src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3457738675,1425977282&fm=26&gp=0.jpg" width="24" height="24"
            class="img-circle"
          >
        </div>
      </a>
      <ul class="dropdown-menu" role="menu">
        <li class="profile-btn"><a href="#" data-toggle="modal" data-target="#profile">个人资料</a></li>
        <li class="settings-btn"><a href="#">设置</a></li>
        <li class="divider"></li>
        <li><a href="./login/login.html">退出</a></li>
      </ul>
    </li>
  </ul>
  <div class="modal fade" id="profile">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
          <h4 class="modal-title">个人资料</h4>
        </div>
        <div class="modal-body">
          <div class="basic">
            <div class="avatar-container" id="avatar-uploader" data-ride="uploader" data-toggle="tooltip" data-placement="bottom" title="修改头像" style="cursor: pointer;">
              <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3457738675,1425977282&fm=26&gp=0.jpg" class="uploader-btn-browse img-circle" width="150" height="150">
            </div>
            <p class="desc">上次登录时间：2020年10月1日</p>
            <p class="desc">上次登录IP： 192.168.1.10</p>
          </div>
          <div class="detail">
            <p>基本信息</p>
            <div class="input-control has-label-left">
              <input id="account" type="text" class="form-control" placeholder="" value="admin">
              <label for="account" class="input-control-label-left text-right">用户名:</label>
            </div>
            <div class="input-control has-label-left">
              <input id="phone" type="text" class="form-control" placeholder="" value="135XXXX7896">
              <label for="phone" class="input-control-label-left text-right">手机:</label>
            </div>
            <div class="input-control has-label-left">
              <input id="email" type="text" class="form-control" placeholder="" value="admin@zui.com">
              <label for="email" class="input-control-label-left text-right">邮箱:</label>
            </div>
            <div class="input-control has-label-left">
              <input id="QQ" type="text" class="form-control" placeholder="" value="187XXXX696">
              <label for="QQ" class="input-control-label-left text-right">QQ:</label>
            </div>
            <div class="input-control has-label-left">
              <input id="weixin" type="text" class="form-control" placeholder="" value="admin@2020">
              <label for="weixin" class="input-control-label-left text-right">微信:</label>
            </div>
            <div class="input-control has-label-left">
              <input id="address" type="text" class="form-control" placeholder="" value="山东省青岛市黄岛区">
              <label for="address" class="input-control-label-left text-right">地址:</label>
            </div>
          </div>
          <div class="password-edit">
            <p>修改密码</p>
            <div class="input-control has-label-left">
              <input id="old-pwd" type="password" class="form-control" placeholder="">
              <label for="old-pwd" class="input-control-label-left text-right">原密码:</label>
            </div>
            <div class="input-control has-label-left">
              <input id="new-pwd" type="password" class="form-control" placeholder="">
              <label for="new-pwd" class="input-control-label-left text-right">新密码:</label>
            </div>
            <div class="input-control has-label-left">
              <input id="confirm-pwd" type="password" class="form-control" placeholder="">
              <label for="confirm-pwd" class="input-control-label-left text-right">确认密码:</label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
        </div>
      </div>
    </div>
  </div>
  <aside id="side">
    <nav class="menu menu-main affix" data-ride="menu">
      <ul id="treeMenu" class="tree tree-menu tree-menu-block" data-ride="tree">
        <li class="active" data-id="home">
          <a href="#"><i class="icon icon-th"></i>首页</a>
        </li>
        <li data-id="article">
          <a href="#"><i class="icon icon-file-text-o"></i>文章</a>
        </li>
        <li>
          <a href="#"><i class="icon icon-area-chart"></i>图表</a>
          <ul>
            <li data-id="bar"><a href="#"><i class="icon icon-bar-chart"></i>条形图</a></li>
            <li data-id="line"><a href="#"><i class="icon icon-line-chart"></i>曲线图</a></li>
          </ul>
        </li>
        <li data-id="dashboard"><a href="#"><i class="icon icon-th-large"></i>仪表盘</a></li>
        <li class="open">
          <a href="#"><i class="icon icon-table"></i>表格</a>
          <ul>
            <li data-id="table"><a href="#">普通表格</a></li>
            <li>
              <a href="#">数据表格</a>
              <ul>
                <li data-id="datatable"><a href="#">数据表格①</a></li>
                <li data-id="datagrid"><a href="#">数据表格②</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li data-id="detail">
          <a href="#"><i class="icon icon-list"></i>详情</a>
        </li>
        <li data-id="form">
          <a href="#"><i class="icon icon-list-alt"></i>表单</a>
        </li>
        <li data-id="files">
          <a href="#"><i class="icon icon-file"></i>文件</a>
        </li>
        <li data-id="card">
          <a href="#"><i class="icon icon-file-image"></i>卡片</a>
        </li>
        <li data-id="settings">
          <a href="#"><i class="icon icon-cogs"></i>设置</a>
        </li>
      </ul>
    </nav>
  </aside>
  <div id="main">
    <div class="tabs" id="tabs-container"></div>
  </div>
  <footer id="footer">
    <ol class="breadcrumb">
      <li class="active">Z-Master</li>
      <li class="active">首页</li>
    </ol>
  </footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/lib/jquery/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/js/zui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/lib/tabs/zui.tabs.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/lib/uploader/zui.uploader.min.js"></script>
</body>

</html>
